<template>
  <el-dialog
    v-model="showDialog"
    title="选择成员"
    width="30%"
    align-center
    @open="handleOpen"
    @close="handleClose"
  >
    <div class="choose-body">
      <div class="member-list" v-loading="listLoading">
        <div class="member-header">
          <el-input
            v-model="queryData.name"
            placeholder="搜索"
            :prefix-icon="Search"
            clearable
          />
        </div>
        <el-scrollbar class="member-body">
          <div
            class="member-item"
            v-for="(member, index) in members"
            :key="member.id"
            @click="handleSelect(member, index)"
          >
            <span>{{ member.name }}</span>
            <span class="select-btn" :class="{ active: member.selected }"
              ><i class="iconfont" v-if="member.selected">&#xe693;</i></span
            >
          </div>
        </el-scrollbar>
      </div>
      <div class="selected-list">
        <div class="selected-header">
          <div>
            {{
              selectedMembers.length > 0
                ? `已选择（${selectedMembers.length}）`
                : "请选择需要添加的数据"
            }}
          </div>
        </div>
        <el-scrollbar class="selected-body" v-if="selectedMembers.length > 0">
          <div
            class="selected-item"
            v-for="(selectedMember, index) in selectedMembers"
            :key="selectedMember.id"
          >
            <div class="item-left">
              <i class="iconfont">&#xe6fe;</i>
              <span>{{ selectedMember.name }}</span>
            </div>
            <i
              class="iconfont item-delete"
              @click="handleRemove(selectedMember, index)"
              >&#xe8e7;</i
            >
          </div>
        </el-scrollbar>
        <div class="selected-empty" v-else>
          <i class="iconfont">&#xe63a;</i>
        </div>
        <div class="selected-bottom">
          <el-button @click="handleClose">取消</el-button>
          <el-button @click="handleConfirm" type="primary">确认</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";

const props = defineProps({
  dialogShow: {
    type: Boolean,
  },
  selectedMembers: {
    type: Array,
  },
  userList: {
    type: Array,
    default: () => [],
  },
});
const emits = defineEmits([
  "update:dialogShow",
  "update:selectedMembers",
  "update:useLimitCooperate",
]);

const showDialog = ref(props.dialogShow);
//已选成员
const selectedMembers = ref(props.userList.filter((item) => props.selectedMembers.includes(item.id)));
const selectedAccount = ref(selectedMembers.value.map((item) => item.account));
const handleOpen = () => {
  selectedMembers.value = props.userList.filter((item) => props.selectedMembers.includes(item.id));
  selectedAccount.value = selectedMembers.value.map((item) => item.account);
  initUsers();
};
const handleClose = () => {
  emits("update:dialogShow", false);
  //二级弹窗的显示与隐藏会触发一级弹窗的数据改变，在这里进行还原
  emits("update:useLimitCooperate", 2);
};
const handleConfirm = () => {
  emits("update:selectedMembers", selectedMembers.value.map((item) => item.id));
  emits("update:dialogShow", false);
  emits("update:useLimitCooperate", 2);
};
watch(
  props,
  (newVal) => {
    showDialog.value = newVal.dialogShow;
  },
  { deep: true }
);
//所有成员
const members = ref();
const queryData = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 999,
  name: "",
});
const listLoading = ref(false);
const initUsers = async () => {
  listLoading.value = true;
  //成员数据处理（添加selected属性）
  members.value = props.userList.map((obj) => {
    const isSelected = selectedAccount.value.includes(obj.account);
    return { ...obj, selected: isSelected };
  });
  listLoading.value = false;
};
initUsers();
//左侧选择成员
const handleSelect = (member, idx) => {
  members.value[idx].selected = !member.selected;
  const index = selectedMembers.value.findIndex(
    (item) => item.account === member.account
  );
  if (member.selected || index === -1) {
    selectedMembers.value.push(member);
  } else {
    selectedMembers.value.splice(index, 1);
  }
};
//右侧移除成员
const handleRemove = (selectedMember, index) => {
  selectedMembers.value.splice(index, 1);
  const idx = members.value.findIndex(
    (item) => item.account === selectedMember.account
  );
  if (idx !== -1) {
    members.value[idx].selected = false;
  }
};
</script>

<style lang="scss" scoped>
.choose-body {
  display: flex;
  height: 400px;
  .member-list {
    width: 50%;
    border-right: 1px solid #ccc;
    .member-header {
      padding-right: 20px;
      margin-bottom: 5px;
    }

    .member-body {
      height: calc(100% - 37px);
      // overflow-y: scroll;
      .member-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px 10px 0;
        font-size: 16px;
        cursor: pointer;
        .select-btn {
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #797979;
          i {
            font-size: 12px;
            color: #fff;
          }
        }
        .select-btn.active {
          background: $mainColor;
          border: none;
        }
      }
      .member-item:hover {
        background: #f2f5fa;
      }
    }
  }
  .selected-list {
    position: relative;
    width: 50%;
    padding-left: 20px;
    .selected-header {
      height: 37px;
      line-height: 37px;
    }
    .selected-body {
      height: calc(100% - 69px);
      // overflow-y: auto;
      .selected-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        .item-left {
          font-size: 16px;
          cursor: default;
          i {
            margin-right: 5px;
            font-size: 16px;
            color: #797979;
          }
        }
        .item-delete {
          display: none;
        }
      }
      .selected-item:hover {
        background: #f2f5fa;
        .item-delete {
          display: block;
          font-size: 20px;
          color: #aaaaaa;
          cursor: pointer;
        }
      }
    }
    .selected-empty {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: calc(100% - 69px);
      color: #797979;
      i {
        font-size: 80px;
      }
    }
    .selected-bottom {
      position: absolute;
      bottom: 0;
      right: 0;
      height: 32px;
    }
  }
}
</style>
